import React, { useState } from 'react';
import { Button, Card, WingBlank, WhiteSpace, List } from 'antd-mobile';
import { useCart } from '../context/CartContext';
import CartItem from '../components/CartItem';
import { useAuth } from '../context/AuthContext';

const Cart = () => {
  const { cartItems, updateQuantity, removeItem, clearCart } = useCart();
  const { isAuthenticated } = useAuth();
  const [loading, setLoading] = useState(false);

  const totalPrice = cartItems.reduce(
    (total, item) => total + (item.price * item.quantity), 0
  );

  const handleCheckout = () => {
    if (!isAuthenticated) {
      alert('请先登录');
      return;
    }
    
    setLoading(true);
    
    // 模拟结算过程
    setTimeout(() => {
      setLoading(false);
      alert(`结算成功！总金额: ¥${totalPrice.toFixed(2)}`);
      clearCart();
    }, 1500);
  };

  if (cartItems.length === 0) {
    return (
      <div style={{ textAlign: 'center', padding: '40px 20px' }}>
        <h1 className="page-title">购物车</h1>
        <p style={{ fontSize: '18px', margin: '20px 0' }}>您的购物车是空的</p>
        <Button type="primary" onClick={() => window.location.href = '/'}>
          去逛逛
        </Button>
      </div>
    );
  }

  return (
    <div>
      <h1 className="page-title">购物车</h1>
      
      <WingBlank size="lg">
        <List>
          {cartItems.map(item => (
            <List.Item key={item.id}>
              <CartItem 
                item={item} 
                onUpdateQuantity={updateQuantity}
                onRemove={removeItem}
              />
            </List.Item>
          ))}
        </List>
        
        <WhiteSpace size="lg" />
        
        <Card>
          <Card.Header title="订单摘要" />
          <Card.Body>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
              <span>商品总数:</span>
              <span>{cartItems.reduce((total, item) => total + item.quantity, 0)}件</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
              <span>商品金额:</span>
              <span>¥{totalPrice.toFixed(2)}</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
              <span>运费:</span>
              <span>¥0.00</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold', fontSize: '18px' }}>
              <span>应付总额:</span>
              <span style={{ color: '#ff4d4f' }}>¥{totalPrice.toFixed(2)}</span>
            </div>
          </Card.Body>
        </Card>
        
        <WhiteSpace size="lg" />
        
        <div style={{ display: 'flex', gap: '10px', marginBottom: '30px' }}>
          <Button 
            style={{ flex: 1 }} 
            onClick={clearCart}
          >
            清空购物车
          </Button>
          <Button 
            type="primary" 
            style={{ flex: 2 }} 
            loading={loading}
            onClick={handleCheckout}
          >
            {loading ? '结算中...' : '去结算'}
          </Button>
        </div>
      </WingBlank>
    </div>
  );
};

export default Cart;